<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>产业链示例</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <style>
      body {
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #f5f7fa;
      }
      .container {
        max-width: 1200px;
        margin: 0 auto;
        background-color: white;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        padding: 24px;
      }
      .header {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
      }
      .logo {
        width: 48px;
        height: 48px;
        background-color: #4455f2;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        color: white;
        font-weight: bold;
        font-size: 24px;
      }
      h1 {
        color: #333;
        font-size: 20px;
        margin: 0;
      }
      .nav {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 30px;
      }
      .nav-item {
        flex: 1;
        min-width: 200px;
        padding: 16px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .nav-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
      .nav-item.active {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
      .nav-icon {
        width: 24px;
        height: 24px;
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .nav-item:nth-child(1) {
        background-color: #eef0ff;
        color: #4455f2;
      }
      .nav-item:nth-child(2) {
        background-color: #e6f7ef;
        color: #0c9;
      }
      .nav-item:nth-child(3) {
        background-color: #fff2e6;
        color: #f90;
      }
      .nav-item:nth-child(4) {
        background-color: #f5eeff;
        color: #7b5ec5;
      }
      .legend {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px;
        margin: 20px 0 30px;
        padding: 16px;
        background-color: #f9fafc;
        border-radius: 12px;
      }
      .legend-item {
        display: flex;
        align-items: center;
        font-size: 14px;
        padding: 6px 12px;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      }
      .legend-color {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      }
      .strong-color {
        background-color: #d4f4d1;
        border: 2px solid #2f7d32;
        color: #2f7d32;
      }
      .missing-color {
        background-color: #ffd6d9;
        border: 2px solid #ff4b4b;
        color: #ff4b4b;
      }
      .recommend-color {
        background-color: #cdeffa;
        border: 2px solid #0078d4;
        color: #0078d4;
      }
      .policy-color {
        background-color: #fff4cc;
        border: 2px solid #c29200;
        color: #c29200;
      }
      .other-color {
        background-color: #fff;
        border: 1px solid #ddd;
      }
      #mermaid-diagram {
        width: 100%;
        overflow: auto;
        padding: 16px;
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      }
      /* 自定义mermaid样式 */
      :root {
        --mermaid-font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      }
      .mermaid {
        font-family: var(--mermaid-font-family) !important;
      }
      /* .mermaid .node {
        position: relative !important;
      } */
      .mermaid .node rect,
      .mermaid .node circle,
      .mermaid .node polygon {
        filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.1));
      }
      .mermaid .edgePath .path {
        stroke-width: 2px;
        stroke: #ccc;
      }
      .mermaid .cluster rect {
        fill: url(#cluster-gradient) !important;
        stroke: #e5e8f0 !important;
        stroke-width: 1px !important;
        rx: 10px !important;
        ry: 10px !important;
        filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.03));
      }
      .mermaid .cluster .label {
        font-size: 14px;
        font-weight: 500;
        color: #5a6378;
        fill: #5a6378 !important;
      }
      /* 调整节点文字和箭头 */
      .mermaid .edgeLabel {
        background-color: white !important;
        border-radius: 4px;
      }
      .mermaid .label {
        font-family: var(--mermaid-font-family) !important;
      }
      .mermaid foreignObject {
        overflow: visible;
      }
      /* 为标签添加样式 */
      .node-tag {
        position: absolute;
        top: -10px;
        left: -10px;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 12px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        z-index: 10;
      }
      .tag-strong {
        background-color: #d4f4d1;
        border: 2px solid #2f7d32;
        color: #2f7d32;
      }
      .tag-missing {
        background-color: #ffd6d9;
        border: 2px solid #ff4b4b;
        color: #ff4b4b;
      }
      .tag-recommend {
        background-color: #cdeffa;
        border: 2px solid #0078d4;
        color: #0078d4;
      }
      .tag-policy {
        background-color: #fff4cc;
        border: 2px solid #c29200;
        color: #c29200;
      }
      /* 添加图标样式 */
      /* .node-tag-icon {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        transform: translate(-50%, -50%) !important;
      } */
    </style>
  </head>
  <body>
    <!-- 添加固定的SVG图标定义 -->
    <svg style="display: none">
      <!-- 强链图标 -->
      <symbol id="strong-icon" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="11" fill="#d4f4d1" stroke="#2f7d32" stroke-width="2" />
        <text x="12" y="16" text-anchor="middle" fill="#2f7d32" font-size="12" font-family="PingFang SC, Microsoft YaHei, sans-serif">✓</text>
      </symbol>

      <!-- 断链图标 -->
      <symbol id="missing-icon" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="11" fill="#ffd6d9" stroke="#ff4b4b" stroke-width="2" />
        <text x="12" y="16" text-anchor="middle" fill="#ff4b4b" font-size="12" font-family="PingFang SC, Microsoft YaHei, sans-serif">⚠</text>
      </symbol>

      <!-- 招商图标 -->
      <symbol id="recommend-icon" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="11" fill="#cdeffa" stroke="#0078d4" stroke-width="2" />
        <text x="12" y="16" text-anchor="middle" fill="#0078d4" font-size="12" font-family="PingFang SC, Microsoft YaHei, sans-serif">🎯</text>
      </symbol>

      <!-- 政策图标 -->
      <symbol id="policy-icon" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="11" fill="#fff4cc" stroke="#c29200" stroke-width="2" />
        <text x="12" y="16" text-anchor="middle" fill="#c29200" font-size="12" font-family="PingFang SC, Microsoft YaHei, sans-serif">📋</text>
      </symbol>
    </svg>

    <div class="container">
      <div class="header">
        <div class="logo">锆</div>
        <h1>贵州锆石科技发展有限公司 - 产业链图谱</h1>
      </div>

      <div class="nav">
        <div class="nav-item active">
          <div class="nav-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M17 6v6h-2v5H9v-5H7V6l5-3z"></path>
            </svg>
          </div>
          产业链知识图谱
        </div>
        <div class="nav-item">
          <div class="nav-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
              <line x1="7" y1="7" x2="7.01" y2="7"></line>
            </svg>
          </div>
          招商建议
        </div>
        <div class="nav-item">
          <div class="nav-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="18" y1="20" x2="18" y2="10"></line>
              <line x1="12" y1="20" x2="12" y2="4"></line>
              <line x1="6" y1="20" x2="6" y2="14"></line>
            </svg>
          </div>
          数据分析
        </div>
        <div class="nav-item">
          <div class="nav-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
            </svg>
          </div>
          自由对话
        </div>
      </div>

      <div class="legend">
        <div class="legend-item">
          <div class="legend-color strong-color">✓</div>
          <span>强链</span>
        </div>
        <div class="legend-item">
          <div class="legend-color missing-color">⚠</div>
          <span>断链</span>
        </div>
        <div class="legend-item">
          <div class="legend-color recommend-color">🎯</div>
          <span>招商</span>
        </div>
        <div class="legend-item">
          <div class="legend-color policy-color">📋</div>
          <span>政策</span>
        </div>
        <div class="legend-item">
          <div class="legend-color other-color"></div>
          <span>其他</span>
        </div>
      </div>

      <div id="mermaid-diagram"></div>
    </div>

    <script>
      mermaid.initialize({
        startOnLoad: true,
        theme: "default",
        securityLevel: "loose",
        fontFamily: "PingFang SC, Microsoft YaHei, sans-serif",
      })

      const diagram = `
        flowchart LR
            %% 添加渐变定义
            classDiagram:::gradientDefs
            
            %% -------- 上游原料 --------
            subgraph "上游原料"
                U1["铝土矿开采"]:::strong
                U2["石灰石/石灰"]:::default
                U3["焦炭/石油焦"]:::default
                U4["氟化盐/冰晶石"]:::default
            end

            %% -------- 基础原料加工 --------
            subgraph "基础原料加工"
                M1["氧化铝精炼"]:::strong
                M2["预焙阳极生产"]:::missing
                M3["原铝电解"]:::strong
            end

            %% -------- 中游半成品 --------
            subgraph "中游半成品"
                S1["铝液铸造"]:::strong
                S2["合金化熔炼"]:::strong
                S3["挤压型材"]:::strong
                S4["热轧板带"]:::default
                S5["冷轧板带"]:::default
                S6["铝箔轧制"]:::recommendPolicy
                S7["锻件/模锻"]:::recommend
                S8["铝粉/粉末冶金"]:::recommend
                S9["表面处理"]:::missing
            end

            %% -------- 下游应用 --------
            subgraph "下游应用"
                D1["建筑门窗幕墙"]:::default
                D2["汽车轻量化部件"]:::recommendPolicy
                D3["航空航天结构"]:::default
                D4["电池铝箔"]:::recommendPolicy
            end

            %% -------- 连接 --------
            U1 --> M1
            U2 --> M1
            M1 --> M3
            U3 --> M2
            M2 --> M3
            U4 --> M3
            M3 --> S1
            S1 --> S2
            S2 --> S3
            S2 --> S4
            S4 --> S5
            S5 --> S6
            S2 --> S7
            S2 --> S8
            S3 --> S9
            S3 --> D1
            S3 --> D2
            S7 --> D3
            S6 --> D4

            %% -------- 样式 --------
            classDef default fill:#fff,stroke:#e0e4e8,stroke-width:1px,color:#444,rx:8,ry:8;
            classDef strong fill:#D4F4D1,stroke:#2F7D32,stroke-width:2px,color:#1b5e20,rx:8,ry:8;
            classDef missing fill:#ffd6d9,stroke:#FF4B4B,stroke-width:2px,color:#c62828,rx:8,ry:8;
            classDef recommend fill:#CDEFFA,stroke:#0078D4,stroke-width:2px,color:#01579b,rx:8,ry:8;
            classDef policy fill:#FFF4CC,stroke:#C29200,stroke-width:2px,color:#bf6c00,rx:8,ry:8;

            %% -------- 应用样式 --------
            class U1,M1,M3,S1,S2,S3 strong;
            class M2,S9 missing;
            class S6,S7,S8,D2,D4 recommend;
            class D2,D4,S6 policy;
        `

      const element = document.getElementById("mermaid-diagram")
      mermaid.render("graphDiv", diagram).then((result) => {
        element.innerHTML = result.svg

        // 添加SVG渐变定义
        const svg = element.querySelector("svg")
        const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs")

        // 创建渐变
        const gradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient")
        gradient.setAttribute("id", "cluster-gradient")
        gradient.setAttribute("x1", "0%")
        gradient.setAttribute("y1", "0%")
        gradient.setAttribute("x2", "0%")
        gradient.setAttribute("y2", "100%")

        const stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop")
        stop1.setAttribute("offset", "0%")
        stop1.setAttribute("stop-color", "#f7f8fc")

        const stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop")
        stop2.setAttribute("offset", "100%")
        stop2.setAttribute("stop-color", "#f0f2f8")

        gradient.appendChild(stop1)
        gradient.appendChild(stop2)
        defs.appendChild(gradient)

        // 将defs添加到SVG中
        if (svg.firstChild) {
          svg.insertBefore(defs, svg.firstChild)
        } else {
          svg.appendChild(defs)
        }

        // 为节点添加标记标签
        setTimeout(() => {
          // 强链节点
          document.querySelectorAll(".strong").forEach((node) => {
            addTag(node, "tag-strong", "✓")
          })

          // 断链节点
          document.querySelectorAll(".missing").forEach((node) => {
            addTag(node, "tag-missing", "⚠")
          })

          // 招商节点
          document.querySelectorAll(".recommend").forEach((node) => {
            addTag(node, "tag-recommend", "🎯")
          })

          // 既有招商又有政策的节点
          document.querySelectorAll(".recommendPolicy").forEach((node) => {
            addTag(node, "tag-recommend", "🎯")
            addTag(node, "tag-policy", "📋", 30)
          })
        }, 100)
      })

      // 为节点添加标签
      function addTag(node, className, symbol, offset = 0) {
        // 创建use元素
        const use = document.createElementNS("http://www.w3.org/2000/svg", "use")

        // 根据className选择对应的图标
        let iconId = ""
        if (className === "tag-strong") {
          iconId = "strong-icon"
        } else if (className === "tag-missing") {
          iconId = "missing-icon"
        } else if (className === "tag-recommend") {
          iconId = "recommend-icon"
        } else if (className === "tag-policy") {
          iconId = "policy-icon"
        }

        use.setAttribute("href", `#${iconId}`)
        use.setAttribute("width", "24")
        use.setAttribute("height", "24")

        const rect = node.querySelector("rect")
        if (rect) {
          use.setAttribute("x", rect.getAttribute("x") - 10)
          use.setAttribute("y", rect.getAttribute("y") - 10)
        }

        // 将use元素添加到节点中
        node.appendChild(use)
      }
    </script>
  </body>
</html>
